/*
 * @Author: FengKongLi 
 * @Date: 2021-09-17 18:39:22 
 * @Last Modified by: FengKongLi
 * @Last Modified time: 2021-09-23 14:10:13
 */
<template>
  <div>
    <!-- 头部 -->
    <Head></Head>
    <!-- 内容区域 -->
    <div class="contentContainer">
      <div class="wrapper">
        <div class="contentItem" v-for="item in artDataList" :key="item.id"   @click="toDetail(item.id)">
          <div class="imgBox">
            <img :src="item.cover" width="200px" height="200px" alt="" />
          </div>
          <div class="content">
            <div class="title">{{ item.title }}</div>
            <div class="realname">作者：{{ item.baseUser.realname }}</div>
            <div class="publishTime">发布时间：{{ item.publishTime | fmtDate }}</div>
            <div class="thumpUp">文章点赞数：{{ item.thumpUp }}</div>
            <div class="thumpUp">文章阅读量：{{ item.readTimes }}</div>
          </div>
        </div>
        <!-- 分页 -->
    <div class="page-div">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.page"
        :page-sizes="[2, 4, 15, 20, 30]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
      </div>
    </div>
    <!-- 底部 -->
    <Foot></Foot>
  </div>
</template>

<script>
import { articlePageQuery } from "../api/index";
import Head from "./components/Head.vue";
import Foot from "./components/Foot.vue";
export default {
  data() {
    return {
      category: {},
      params: {
        page: 1,
        pageSize: 10,
      },
      // 总条数
      total: 0,
      // 文章列表数据
      artDataList: {},
    };
  },
  watch: {
    // 深度监听分页参数
    "$route.query": {
      handler(query) {
        this.category = query;
        this.getArticleData();
      },
      deep: true,
    },
    params: {
      handler() {
        this.getArticleData();
      },
      deep: true,
    },
  },
  components: {
    Head,
    Foot,
  },
  created() {
    // 拿到别的页面跳转过来带的参数
    // console.log(this.$route);
    this.category = this.$route.query;
    this.getArticleData();
  },
  methods: {
    async getArticleData() {
      this.params.categoryId = this.category.categoryId;
      let res = await articlePageQuery(this.params);
      // console.log(res.data);
      this.total = res.data.total;
      this.artDataList = res.data.list;
    },
    toDetail(id) {
      this.$router.push({
        path: "/articleDetail",
        query: {
          id: id,
        },
      });
    },
    //每页显示的条数发生变化时的事件处理程序
    handleSizeChange(val) {
      this.params = {
        page: 1,
        pageSize: val,
      };
    },
    // 当前页码发生变化时的事件处理程序
    handleCurrentChange(val) {
      this.params.page = val;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/list.scss";
</style>